<template>
  <div class="main">
    <div class="top_text">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button size="mini" style="float: right;" @click="GoTo" type="success">新增试题</el-button>
    </div>
    <el-form ref="myForm" :inline="true" label-position="left" label-width="80px" :model="dataform" class="demo-form-inline">
      <el-form-item label="学科" prop="subject">
        <el-select @change="changeSubject" v-model="dataform.subjectID" placeholder="请选择">
          <el-option
            v-for="item in options_subject"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select v-model="dataform.catalogID" placeholder="请选择">
          <el-option
            v-for="item in options_directorys"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select v-model="dataform.tags" placeholder="请选择">
          <el-option
            v-for="item in options_label"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
       <el-input v-model="dataform.keyword"></el-input>
      </el-form-item>
      <el-form-item label="试题类型">
        <el-select v-model="dataform.questionType" placeholder="请选择">
          <el-option
            v-for="item in options_type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select v-model="dataform.difficulty" placeholder="请选择">
          <el-option
            v-for="item in options_difficulty"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select v-model="dataform.direction" placeholder="请选择">
          <el-option
            v-for="item in options_direction"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select  v-model="dataform.name" placeholder="请选择">
          <el-option
            v-for="item in options_name"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input v-model="remarks"></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input v-model="dataform.enterpriseID"></el-input>
      </el-form-item>
      <el-form-item label="城市"  class="item_last">
        <el-select  @change="changeProvice" class="city" style="margin-right: 10px;" v-model="dataform.province"  placeholder="请选择">
          <el-option
            v-for="item in options_province"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
        <el-select class="city" v-model="dataform.city"  placeholder="请选择">
          <el-option
            v-for="item in options_city"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="padding-left: 190px" class="fr-button">
          <el-button size="mini" @click="resetForm">消除</el-button>
          <el-button type="primary" size="mini" @click="SearchClick">搜索</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// eslint-disable-next-line camelcase
import { simple as subjects_simple } from '../../api/hmmm/subjects'
// eslint-disable-next-line camelcase
import { simple as directorys_simple } from '../../api/hmmm/directorys'
import { provinces, citys } from '../../api/hmmm/citys'
import { EventBus } from '../../../src/EventBus'
export default {
  name: 'questions-serch',

  data () {
    return {
      dataform: {

      }, // 表单内容
      options_subject: [], // 学科
      options_directorys: [], // 二级目录
      options_label: [
        {
          label: '单选',
          value: 1
        },
        {
          label: '多选',
          value: 2
        },
        {
          label: '简答',
          value: 3
        }
      ], // 标签
      keywords: '', // 关键字
      options_type: [
        {
          label: '单选',
          value: 1
        },
        {
          label: '多选',
          value: 2
        },
        {
          label: '简答',
          value: 3
        }
      ], // 试题类型
      options_difficulty: [
        {
          label: '简答',
          value: 1
        },
        {
          label: '一般',
          value: 2
        },
        {
          label: '困难',
          value: 3
        }
      ], // 难度
      options_direction: [
        {
          label: 'o2o',
          value: 'o2o'
        },
        {
          label: '外包服务',
          value: '外包服务'
        },
        {
          label: '企业服务',
          value: '企业服务'
        },
        {
          label: '互联网金融',
          value: '互联网金融'
        },
        {
          label: '企业咨询',
          value: '企业咨询'
        },
        {
          label: '互联网',
          value: '互联网'
        },
        {
          label: '电子商务',
          value: '电子商务'
        },
        {
          label: '其他',
          value: '其他'
        }
      ], // 方向
      options_name: [
        {
          label: '超级管理员',
          value: 2
        },
        {
          label: '录入管理员',
          value: 3
        }
      ], // 录入人
      remarks: '', // 备注
      abbreviation: '', // 企业简称
      options_province: [
        {
          label: '简答',
          value: 1
        },
        {
          label: '一般',
          value: 2
        },
        {
          label: '困难',
          value: 3
        }
      ], // 城市_省
      options_city: [
        {
          label: '简答',
          value: 1
        },
        {
          label: '一般',
          value: 2
        },
        {
          label: '困难',
          value: 3
        }
      ] // 城市_市
      // value: '',
      // city: ''

    }
  },
  created () {
    this.subjectList()
    this.getProvinces()
    this.getCity()
  },
  methods: {
    // 页面跳转
    GoTo () {
      this.$router.push({ path: '/questions/new' })
    },
    resetForm () {
      this.dataform = {}
    },
    // 学科列表
    async subjectList () {
      try {
        const { data } = await subjects_simple()
        this.options_subject = data
        // console.log(data)
      } catch (error) {

      }
    },
    // 学科获取目录
    changeSubject (e) {
      // console.log(e)
      this.simpleList(e)
    },
    // 二级目录
    async simpleList (id) {
      try {
        const { data } = await directorys_simple({ subjectID: id })
        this.options_directorys = data
        // console.log(data)
      } catch (error) {

      }
    },
    // 获取城市
    getProvinces () {
      const data = provinces()
      this.options_province = data
      // console.log(data)
    },
    // 获取城市下面县
    getCity (text) {
      const data = citys(text)
      this.options_city = data
    },
    changeProvice (e) {
      // console.log(e)
      this.city = e
      this.getCity(e)
    },
    SearchClick () {
      // this.onReast()
      Object.keys(this.dataform).forEach(key => {
        if (!this.dataform[key]) {
          delete this.dataform[key]
        }
      })
      // this.$emit('my-event', this.dataform)page: 1,
      this.dataform.page = 1
      this.dataform.pagesize = 5
      EventBus.$emit('my-event', this.dataform)
      // console.log(this.dataform)
      // this.$parent.GetquestionsList(this.dataform)
    }
  }
}
</script>

<style lang="scss" scoped>
.top_text{
  padding-right: 25px;
    margin-bottom: 30px;
    font-size: 12px;
    color: pink;
}
.el-form-item__content{
  width: 100%;
}
.demo-form-inline{
  box-sizing: border-box;
  .el-form-item{
    height: 32px;
    width: 24%;
    line-height: 32px;
    ::v-deep .el-input--medium .el-input__inner{
      width: 230px;
      height: 32px;
      line-height: 32px;
    };
    .item_last{
      .el-form-item__content{
        width: 200px;
        .el-input--medium .el-input__inner{
          width: 100px;
        }
      }
    }
  }
}
::v-deep .city{
  width: 110px !important;
  .el-input__inner{
    width: 110px !important;
  }
}

</style>
